
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Single File Upload with GET and POST Vars Submission and Server Data Return</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
	.uploadButton a {
		display:block;
		width:100px;
		height:40px;
		text-decoration: none;
	}

	.uploadButton a {
		background: url("assets/uploadFileButton.png") 0 0 no-repeat;
	}

    .uploadButton a:visited {
		background-position: 0 0;
	}

    .uploadButton a:hover {	
		background-position: 0 -40px;
	}

    .uploadButton a:active {
		background-position: 0 -80px;
	}
</style>
<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Single File Upload with GET and POST Vars Submission and Server Data Return</h1>

<div class="exampleIntro">
	<p>This example extends the single file upload example and shows how to submit GET and POST variables along with the file upload request, and how to receive data from the server.</p>

<p><strong>Please note:</strong> This example will not work when run from a local filesystem because Flash only allows ExternalInterface communication with pages loaded from the network. If you’d like to run this example locally, set up a local web server and launch it from there. </p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="selectButton" style="width:100px;height:40px"></div> 
<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>

<div id="filename">
File selected:
</div>
<div id="percent">
Percent uploaded:
</div>
<div>Sending via GET: foo='bar', foo1='bar1'</div>
<div>Sending via POST: bar='bazz', bar1='bazz1'</div>
<div id="result">Data returned from the server:</div>

<script>

YUI({ filter: 'raw' }).use("uploader", function (Y) {

var uploader = new Y.Uploader({boundingBox:"#selectButton", 
							   buttonSkin:"assets/selectFileButton.png",
							   transparent: false
							   });	

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
uploader.on("uploadcompletedata", uploadCompleteData);

Y.one("#uploadButtonLink").on("click", uploadFile);


function setupUploader (event) {
	uploader.set("multiFiles", false);
	uploader.set("log", true);
	
	var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
	                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
	
    uploader.set("fileFilters", fileFilters);
}


function fileSelect (event) {
	var fileData = event.fileList;	

	for (var key in fileData) {
		var output = "File selected: " + fileData[key].name;
		Y.one("#filename").setContent(output);
	}
}

function updateProgress (event) {
	Y.one("#percent").setContent("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
}

function uploadComplete (event) {
	Y.one("#percent").setContent("Upload complete!");
}

function uploadCompleteData (event) {
	Y.one("#result").setContent("Data returned from the server:<br>" + event.data);
}

function uploadFile (event) {
	uploader.uploadAll("http://www.yswfblog.com/upload/upload.php?foo=bar&foo1=bar1", "POST", {bar:"bazz", bar1:"bazz1"});
}


});

</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
